<template>
    <div class="admin">
      <el-container>
        <el-aside width="200">
          <adminHeader></adminHeader>
        </el-aside>
        <el-main>
          <el-page-header content="卡券回收订单管理"></el-page-header>
          <div style="width: 98%">
            <ve-histogram :setting="settings" :data="chartData"  :extend="extend"></ve-histogram>
          </div>

          <el-table :data="recardData" style="width:100%;background-image: linear-gradient(#ffffff, #f2f6fc);" height="79vh" border>
            <el-table-column prop="user" label="用户" align="center"></el-table-column>
            <el-table-column prop="race" label="卡种" align="center" :filters="races" :filter-method="filter" ></el-table-column>
            <el-table-column prop="types" label="卡类" align="center" :filters="types" :filter-method="filter"></el-table-column>
            <el-table-column prop="num" label="数量" align="center" sortable></el-table-column>
            <el-table-column prop="price" label="单价" align="center"></el-table-column>
            <el-table-column prop="totle_price" label="总价" align="center" sortable></el-table-column>
            <el-table-column fixed="right" label="操作">
              <template slot-scope="scope">
                <el-button v-if="scope.row.state==0" type="text" @click.native.prevent="seeRecard(scope.row)">回收</el-button>
                <span v-else>已完成</span>
              </template>
            </el-table-column>
          </el-table>
          <span>共计：{{total}}条数据</span>
          <el-dialog>
            <span>{{mess}}</span>
          </el-dialog>
        </el-main>
      </el-container>
    </div>
</template>

<script>
import adminHeader from "../../components/adminHeader";
export default {
  name: "recardAdmin",
  components:{adminHeader},
  data(){
    return{
      recardData:[],
      height:document.documentElement.clientHeight-120,
      races:[],
      types:[],
      total:0,
      mess:{},
      settings: {
        labelMap: {
          'type': '卡类',
          'num': '数量'
        }
      },
      chartData:{
        columns: ["type", "num"],
        rows: [],
      },
      extend:{
        legend:{
          show:false
        },
        grid:{
          // show:true,
          backgroundColor: "#FFF6F3",
          borderColor: "#FFF6F3",
        },
        series(v) {
          // console.log("v", v);
          // 设置柱子的样式
          v.forEach(i => {
            console.log("series", i);
            i.barWidth = 40;
            i.itemStyle={
              barBorderRadius:[10,10,10,10],
              color:'#409EFF',
              borderWidth:1,
            };
            i.label={
              color:'#666',
              show:true,
              position:'top',
              // backgroundColor:'yellow',
            };

          });
          return v;
        },
      }
    }
  },
  mounted() {
    this.getRecard();
  },
  methods:{
    state(){},
    changePage(list){
      console.log(list);
      this.page = list;
      this.getRecard();
    },
    getRecard(){
      this.axios.get('/api/admin/getRecard').then(res=>{
        console.log(res)
        console.log(res.data.data);
        this.recardData = res.data.data;
        this.total = res.data.data.length;
        // this.total = res.data.length;
        var race= [];
        var type = [];
        for (let i = 0;i < this.recardData.length;i++){
          race.push(this.recardData[i].race);
          type.push(this.recardData[i].types);
        }
        var arr1 = [...new Set(race)]
        var arr2 = [...new Set(type)];
        console.log(arr2);
        this.races = arr1.map(i=>({
          text:i,value:i
        }));
        this.types = arr2.map(item=>({
          text:item,value:item
        }))
        console.log(this.races,this.types);
        this.chartData.rows = res.data.chart;
      }).catch(err=>{
        console.log(err)
      })
    },
    seeRecard(row){
      console.log(row);
      if (row.state == 0){
        this.axios.post('/api/admin/dealRecyling',{
          ...row,
          state:1
        })
          .then(res=>{
            console.log(res);
            this.getRecard();
          }).catch(err=>{
            console.log(err)
          })
      }else {
        this.mess = {...row}
      }
    },
    check(row){
      console.log(row)
    },
    filter(value, row, column){
      const property = column['property'];
      return row[property] === value;
    }
  }
}
</script>

<style scoped>
/deep/ .el-main{
  margin-top: 10px;
}
</style>
